<template>
	<view>
		<tui-list-view title="修改个人信息">
			<tui-list-cell :hover="false" v-if="editKey == 'memberName'">
				<view class="tui-line-cell">
					<view class="tui-title">姓名</view>
					<input placeholder-class="tui-phcolor" class="tui-input" v-model="editValue" placeholder="请输入姓名" maxlength="10" type="text" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" v-if="editKey == 'nickName'">
				<view class="tui-line-cell">
					<view class="tui-title">昵称</view>
					<input placeholder-class="tui-phcolor" class="tui-input" v-model="editValue" placeholder="请输入昵称" maxlength="10" type="text" />
				</view>
			</tui-list-cell>
			<radio-group class="block" @change="genderChange" v-if="editKey == 'gender'">
				<view class="cu-form-group">
					<view class="title">男</view>
					<radio class='radio' :class="editValue=='1'?'checked':''" :checked="editValue=='1'?true:false" value="1"></radio>
				</view>
				<view class="cu-form-group">
					<view class="title">女</view>
					<radio class='radio' :class="editValue=='2'?'checked':''" :checked="editValue=='2'?true:false" value="2"></radio>
				</view>
			</radio-group>
		</tui-list-view>
		
		<view class="tui-cmt-btn padding-lr-xl">
			<tui-button shape="square" @tap="submitCmt" type="darkgold" :disabled="disabled" :loading="loading">完成</tui-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				editKey: '',
				editValue: '',
				disabled: false,
				loading: false,
			}
		},
		onLoad(option) {
			if (option.param) {
				let param = JSON.parse(option.param)
				this.editKey = param.key
				this.editValue = param.value
			}
		},
		methods: {
			genderChange(e) {
				this.editValue = e.detail.value
			},
			submitCmt() {
				if (this.disabled || this.loading) {
					return
				}
				if (this.editValue == '' || this.editValue == null) {
					this.fetch.toast("修改内容不能为空")
					return
				}
				this.disabled = true
				this.loading = true
				this.fetch.request("/api/wxmini/editMemberInfo", "POST", {
					editKey: this.editKey,
					editValue: this.editValue
				}, false, true, false, this)
				.then((res) => {
					this.disabled = false
					this.loading = false
					this.fetch.toast(res.msg, "", res.code == 0)
				}).catch(() => {
					this.disabled = false
					this.loading = false
				})
			}
		}
	}
</script>

<style>
	.tui-line-cell {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	
	.tui-title {
		line-height: 30rpx;
		min-width: 120rpx;
		flex-shrink: 0;
	}
	
	.tui-input {
		font-size: 30rpx;
		color: #333;
		padding-left: 10rpx;
		flex: 1;
		overflow: visible;
	}
	
	.tui-phcolor {
		font-size: 28rpx;
		color: #999;
	}
	
	.tui-cmt-btn {
		width: 100%;
		margin-top: 60rpx;
	}
</style>
